<template>
  <div>
    <el-affix :offset="71">
      <div class="mx-auto mt-2 w-75 text-center">
        <el-input
          placeholder="请输入笔记名字关键字"
          class="w-75"
          v-model="noteName"
          size="large"
        >
          <template #append>
            <el-button type="info" plain @click="getNoteList">
              <el-icon style="font-size: 1rem"><Search /></el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
    </el-affix>
    <el-card
      shadow="hover"
      v-for="note in noteli"
      :key="note.noteId"
      class="my-2 mx-3"
    >
      <el-row>
        <el-col :span="24" class="fs-3">{{ note.noteName }}</el-col>
      </el-row>

      <el-row class="mt-2">
        <el-col :span="24" class="ps-2">
          {{ note.noteIntro }}
        </el-col>
      </el-row>

      <el-row class="mt-2">
        <el-col :span="6" class="ps-2">{{ note.publishTime }}</el-col>
        <el-col :span="3" :offset="1"
          ><el-icon class="h-100"><Star /></el-icon> {{ note.likeNum }}</el-col
        >
        <el-col :span="3"
          ><el-icon class="h-100"><ChatLineRound /></el-icon>
          {{ note.commentNum }}</el-col
        >
        <el-col :span="3"
          ><el-icon class="h-100"><View /></el-icon> {{ note.viewNum }}</el-col
        >
        <el-col :span="3">
          <el-button @click="del(note.noteId)" type="danger">删除</el-button>
        </el-col>
      </el-row>
    </el-card>

    <div class="mx-3">
      <el-pagination
        background
        layout="sizes,prev,pager,next"
        :total="page.total"
        v-model:page-size="page.pageSize"
        v-model:current-page="page.pageNum"
        :page-sizes="[1, 2, 3, 4, 5]"
      />
    </div>
  </div>
</template>

<script>
import { Search, Star, ChatLineRound, View } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
export default {
  name: "NoteList",
  components: {
    Search,
    Star,
    ChatLineRound,
    View,
  },
  data() {
    return {
      noteName: null,
      noteli: [],
      //分页参数，默认当前是第一页开始，每页展示5条数据
      page: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
    };
  },
  mounted() {
    this.getNoteList();
  },
  methods: {
    getNoteList() {
      let Url =
        "/api/space/note/list/" +
        this.page.pageNum +
        "/" +
        this.page.pageSize +
        "?noteName=" +
        this.noteName;
      this.$axios.get(Url).then((response) => {
        let data = response.data;
        if (data.code == 200) {
          this.noteli = data.data.list;
          this.page.total = data.data.total;
        }
      });
    },
    del(noteId) {
      ElMessageBox.confirm("是否删除这篇文章?", "警告", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        this.$axios
          .get("/api/space/note/del?noteId" + noteId)
          .then((response) => {
            let data = response.data;
            if (data.code == 200) {
              alert(data.msg);
              this.getNoteList();
            }
          });
      });
    },
  },

  watch: {
    "page.pageNum": {
      handler() {
        this.getNoteList();
      },
    },
    "page.pageSize": {
      handler() {
        this.getNoteList();
      },
    },
  },
};
</script>

<style></style>
